<template>
  <div style="display: inline-block;margin-right: 5px;">
    <Button type="primary"
            icon="md-add"
            class="button-add"
            @click="open">新增</Button>
    <Modal v-model="modal1"
           title="新增"
           ok-text="提交"
           :loading="loading"
           @on-ok="handleSubmit('formValidate')">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80">
        <FormItem label="手机号"
                  prop="PhoneNum">
          <Input v-model="formValidate.PhoneNum"
                 placeholder="请输入您的手机号（登录账号）" />
        </FormItem>
        <FormItem label="昵称">
          <Input v-model="formValidate.NickName"
                 placeholder="请输入您的昵称" />
        </FormItem>
        <FormItem label="密码"
                  prop="Pwd">
          <Input v-model="formValidate.Pwd"
                 type="password"
                 placeholder="请输入您的密码" />
        </FormItem>
        <FormItem label="用户类型"
                  prop="UserType">
          <Select v-model="formValidate.UserType"
                  style="width: 150px">
            <Option v-for="item in UserType"
                    :value="item.number"
                    :key="item.number">{{ item.text }}</Option>
          </Select>
        </FormItem>
        <FormItem label="真实姓名">
          <Input v-model="formValidate.RealName"
                 placeholder="请输入您的真实姓名" />
        </FormItem>
        <FormItem label="身份证号">
          <Input v-model="formValidate.IDCardNo"
                 placeholder="请输入您的身份证号" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { addUserInfo } from '@/api/user'

export default {
  name: 'add',
  data () {
    return {
      modal1: false,
      loading: true,
      UserType: [
        {
          number: 0,
          text: '用户'
        },
        {
          number: 1,
          text: '商家'
        },
        {
          number: 2,
          text: '授权人'
        }
      ],
      formValidate: {
        NickName: '',
        IDCardNo: '',
        RealName: ''
      },
      ruleValidate: {
        PhoneNum: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        Pwd: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        UserType: [
          { required: true, type: 'number', message: '请选择用户类型', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.modal1 = false
      this.loading = true
      this.formValidate = {
        NickName: '',
        IDCardNo: '',
        RealName: ''
      }
      this.handleReset('formValidate')
    },
    open () {
      this.init()
      this.modal1 = true
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formValidate.SysUserId = localStorage.getItem('userId')
          addUserInfo(this.formValidate).then(res => {
            if (res.data.success) {
              this.modal1 = false
              this.loading = true
              this.$Message.info('添加成功!')
            } else {
              this.modal1 = true
              this.loading = false
              this.$Message.info('添加失败!')
            }
          }).then(() => {
            this.$emit('getList')
          })
        } else {
          this.modal1 = true
          this.loading = false
        }
      })
    },
    // 重置表单
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
